<template>
  <view class="scroll-course">
    <scroll-view class="scroll-view" scroll-x>
      <view class="course-item-box" v-for="i in 8" :key="i">
         <CourseItem :isColumn="true" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import CourseItem from '@/components/course-item'
  export default {
    components: {
      CourseItem
    }
  }
</script>

<style lang="scss">
  .scroll-view {
    white-space: nowrap; // 一行显示不换行
    .course-item-box {
      display: inline-block;
      width: 310rpx;
      background-color: #fff;
      padding: 0 10rpx;
      margin-right: 20rpx;
      border-radius: 20rpx;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }
  }
</style>
